<template>
  <div class="service-task">

    <!--搜索框-->
    <service-task-query-div></service-task-query-div>

    <el-table :data="taskList" border stripe class="item-table">
      <el-table-column type="index" width="50"></el-table-column>
      <el-table-column align="center" prop="userId" label="用户ID" width="100">
        <template scope="scope"><p style="color: blue;">{{scope.row.userId}}</p></template>
      </el-table-column>
      <el-table-column align="center" prop="userInfo.realName" label="用户姓名" width="80"></el-table-column>
      <el-table-column align="center" prop="userInfo.cell" label="用户手机" width="115"></el-table-column>
      <el-table-column align="center" prop="taskName" label="请求类型">
        <template scope="scope"><p style="color: #409EFF;">{{scope.row.taskName}}</p></template>
      </el-table-column>
      <el-table-column align="center" prop="dayId" label="请求时间" width="90"></el-table-column>
      <el-table-column align="center" prop="taskMessage" label="异常信息"></el-table-column>
      <el-table-column align="center" prop="operateStatus" label="处理状态" width="90">
        <template scope="scope">
          <el-tag v-if="scope.row.operateStatus === 1" size="mini" type="success">未处理</el-tag>
          <el-tag v-else-if="scope.row.operateStatus === 2" size="mini">跟进中</el-tag>
          <el-tag v-else-if="scope.row.operateStatus === 3" size="mini" type="info">已完成</el-tag>
          <el-tag v-else-if="scope.row.operateStatus === 4" size="mini" type="info">无需处理</el-tag>
          <el-tag v-else-if="scope.row.operateStatus === 5" size="mini" type="info">已加微信</el-tag>
          <el-tag v-else-if="scope.row.operateStatus === 7" size="mini" type="danger">处理失败</el-tag>
          <el-tag v-else size="mini" type="danger">未知</el-tag>
        </template>
      </el-table-column>

      <el-table-column align="center" prop="operateor" label="跟踪人" width="120"></el-table-column>
      <el-table-column align="center" prop="operateTime" label="最后处理时间" width="120"></el-table-column>
      <el-table-column align="center" prop="operateMessage" label="跟踪结果"></el-table-column>

      <el-table-column align="center" prop="status" label="操作">
        <template scope="scope">
          <el-button type="text" size="mini" style="color: #E6A23C" @click="showServiceTask(scope.row)">查看</el-button>
          <el-button type="text" size="mini" style="color: #1E90FF" @click="editServiceTask(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="page">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[8, 10, 12, 20]"
        :current-page.sync="page.current"
        :page-size="page.size"
        :total="page.total"
        layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>
    </div>


    <el-dialog title="用户请求详情" :visible.sync="centerDialogVisible" width="80%" center>
      <el-table :data="showDialogServiceTaskList" border stripe class="item-table">
        <el-table-column type="index" width="50"></el-table-column>
        <el-table-column align="center" prop="userId" label="用户ID" width="100">
          <template scope="scope"><p style="color: blue;">{{scope.row.userId}}</p></template>
        </el-table-column>
        <el-table-column align="center" prop="userInfo.realName" label="用户姓名" width="80"></el-table-column>
        <el-table-column align="center" prop="userInfo.cell" label="用户手机" width="115"></el-table-column>
        <el-table-column align="center" prop="taskName" label="请求类型">
          <template scope="scope"><p style="color: #409EFF;">{{scope.row.taskName}}</p></template>
        </el-table-column>
        <el-table-column align="center" prop="dayId" label="请求时间" width="90"></el-table-column>
        <el-table-column align="center" prop="taskMessage" label="异常信息"></el-table-column>
        <el-table-column align="center" prop="operateStatus" label="处理状态" width="90">
          <template scope="scope">
            <el-tag v-if="scope.row.operateStatus === 1" size="mini" type="success">未处理</el-tag>
            <el-tag v-else-if="scope.row.operateStatus === 2" size="mini">跟进中</el-tag>
            <el-tag v-else-if="scope.row.operateStatus === 3" size="mini" type="info">已完成</el-tag>
            <el-tag v-else-if="scope.row.operateStatus === 4" size="mini" type="info">无需处理</el-tag>
            <el-tag v-else-if="scope.row.operateStatus === 5" size="mini" type="info">已加微信</el-tag>
            <el-tag v-else-if="scope.row.operateStatus === 7" size="mini" type="danger">处理失败</el-tag>
            <el-tag v-else size="mini" type="danger">未知</el-tag>
          </template>
        </el-table-column>

        <el-table-column align="center" prop="operateor" label="跟踪人" width="120"></el-table-column>
        <el-table-column align="center" prop="operateTime" label="最后处理时间" width="120"></el-table-column>

        <el-table-column align="center" prop="operateMessage" label="跟踪结果"></el-table-column>

        <!--<el-table-column v-else align="center" prop="operateMessage" label="跟踪结果">-->
          <!--<template scope="scope" >-->
            <!--<el-input v-model="scope.row.operateMessage"></el-input>-->
          <!--</template>-->
        <!--</el-table-column>-->
      </el-table>
    </el-dialog>

    <el-dialog title="用户请求详情" :visible.sync="centerDialogEditVisible" width="80%" center>
      <el-table :data="showDialogServiceTaskList" border stripe class="item-table">
        <el-table-column type="index" width="50"></el-table-column>
        <el-table-column align="center" prop="userId" label="用户ID" width="100">
          <template scope="scope"><p style="color: blue;">{{scope.row.userId}}</p></template>
        </el-table-column>
        <el-table-column align="center" prop="userInfo.realName" label="用户姓名" width="80"></el-table-column>
        <el-table-column align="center" prop="userInfo.cell" label="用户手机" width="115"></el-table-column>
        <el-table-column align="center" prop="taskName" label="请求类型">
          <template scope="scope"><p style="color: #409EFF;">{{scope.row.taskName}}</p></template>
        </el-table-column>
        <el-table-column align="center" prop="dayId" label="请求时间" width="90"></el-table-column>
        <el-table-column align="center" prop="taskMessage" label="异常信息"></el-table-column>
        <el-table-column align="center" prop="operateStatus" label="处理状态" width="90">
          <template scope="scope">
            <el-tag v-if="scope.row.operateStatus === 1" size="mini" type="success">未处理</el-tag>
            <el-tag v-else-if="scope.row.operateStatus === 2" size="mini">跟进中</el-tag>
            <el-tag v-else-if="scope.row.operateStatus === 3" size="mini" type="info">已完成</el-tag>
            <el-tag v-else-if="scope.row.operateStatus === 4" size="mini" type="info">无需处理</el-tag>
            <el-tag v-else-if="scope.row.operateStatus === 5" size="mini" type="info">已加微信</el-tag>
            <el-tag v-else-if="scope.row.operateStatus === 7" size="mini" type="danger">处理失败</el-tag>
            <el-tag v-else size="mini" type="danger">未知</el-tag>
          </template>
        </el-table-column>

        <el-table-column align="center" prop="operateor" label="跟踪人" width="120"></el-table-column>
        <el-table-column align="center" prop="operateTime" label="最后处理时间" width="120"></el-table-column>

        <el-table-column align="center" prop="operateMessage" label="跟踪结果">
          <template scope="scope" >
            <el-input v-model="scope.row.operateMessage"></el-input>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

  </div>
</template>

<script>
  import ServiceTaskQueryDiv from "../../components/task/ServiceTaskQueryDiv.vue";

  export default {
    components: {
      ServiceTaskQueryDiv},
    name: 'ServiceTask',
    data () {
      return {
        centerDialogVisible: false,
        centerDialogEditVisible: false,
        queryForm: {},
        taskList: [],
        page: {
          current: 1,
          size: 8,
          total: 0
        },

        // 客服单个任务列表dialog
        showDialogServiceTaskList: []
      }
    },
    created() {
    },
    methods: {
      /** 页数修改处理 */
      handleSizeChange(val) {
        this.page.current = 1;
        this.page.size = val;
        this.loadServiceTaskList(this.queryForm);
      },
      handleCurrentChange() {
        this.loadServiceTaskList(this.queryForm);
      },

      loadServiceTaskList(queryForm) {
        this.queryForm = queryForm;
        this.$http.post('api/task/page/list/query', {
          serviceId: queryForm.serviceId,
          userId: queryForm.userId,
          userPhone: queryForm.userPhone,
          taskType: queryForm.taskType,
          operateStatus: queryForm.operateStatus,
          userType: queryForm.userType,
          userReqTimeStart: queryForm.userReqTime[0] === '' ? '' : queryForm.userReqTime[0].getTime(),
          userReqTimeEnd: queryForm.userReqTime[1] === '' ? '' : queryForm.userReqTime[1].getTime(),
          operateTimeStart: queryForm.operateTime[0] === '' ? '' : queryForm.operateTime[0].getTime(),
          operateTimeEnd: queryForm.operateTime[1] === '' ? '' : queryForm.operateTime[1].getTime(),
          current: this.page.current,
          size: this.page.size
        }, {emulateJSON: true}).then((res) => {
          if (!this.checkResponse(res)) {
            return;
          }

          console.info(res.body.data);

          let page = res.body.data;
          this.page.total = page.total;
          this.taskList = page.data;

        }).catch((e) => { this.messageException(e); });
      },

      showServiceTask(task) {
        this.$http.post('api/task/user/id', {
          userId: task.userId
        }, {emulateJSON: true}).then((res) => {
          if (!this.checkResponse(res)) {
            return;
          }

          console.info(res.body.data);
          this.showDialogServiceTaskList = res.body.data;
          this.centerDialogVisible = true;
        }).catch((e) => { this.messageException(e); });
      },
      editServiceTask(task) {
        this.$http.post('api/task/user/id', {
          userId: task.userId
        }, {emulateJSON: true}).then((res) => {
          if (!this.checkResponse(res)) {
            return;
          }

          console.info(res.body.data);
          this.showDialogServiceTaskList = res.body.data;
          this.centerDialogEditVisible = true;
        }).catch((e) => { this.messageException(e); });
      }
    }
  }
</script>

<style lang="less" scoped>
  .service-task {
  }
</style>
